<template>
  <!-- 组件复用  header header props传值，都是纯文字-->
  <el-card class="card-container">
    <div class="card-header">
      {{ title }}
      <span>
        <svg
          t="1628562000691"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1972"
          width="16"
          height="16"
        >
          <path
            d="M512 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z m0-844.8c-206.506667 0-375.466667 168.96-375.466667 375.466667 0 206.506667 168.96 375.466667 375.466667 375.466667 206.506667 0 375.466667-168.96 375.466667-375.466667 0-206.506667-168.96-375.466667-375.466667-375.466667z"
            p-id="1973"
            fill="#cdcdcd"
          ></path>
          <path
            d="M512 796.714667a46.08 46.08 0 0 1-46.933333-46.933334v-269.056c0-26.624 20.352-46.933333 46.933333-46.933333 26.581333 0 46.933333 20.309333 46.933333 46.933333v269.056c0 26.624-20.352 46.933333-46.933333 46.933334zM512 364.928a46.08 46.08 0 0 1-46.933333-46.933333V274.218667c0-26.624 20.352-46.933333 46.933333-46.933334 26.581333 0 46.933333 20.309333 46.933333 46.933334v43.776c0 26.624-21.888 46.933333-46.933333 46.933333z"
            p-id="1974"
            fill="#cdcdcd"
          ></path>
        </svg>
      </span>
    </div>
    <div class="card-value">{{ value }}</div>
    <div class="card-charts">
      <!-- 作用域插槽 -->
      <slot />
    </div>
    <div class="card-footer">
      <!-- 命名插槽 -->
      <slot name="footer" />
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CommontCard',
  props: {
    title: String,
    value: String
  }
}
</script>

<style scopted>
.card-container {
  /* height: 170px;
  width: 230px; */
  /* padding: 20px; */
  margin: 10px 0;
}
.card-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin: 5px 0;
}
.card-value {
  font-size: 20px;
}
.card-charts {
  width: 100%;
  height: 47px;
  margin: 10px 0;
  font-size: 14px;
  line-height: 47px;
}
.card-footer {
  padding-top: 10px;
  border-top: 1px solid #ccc;
}
</style>
